//渲染第一行
var tmp1 = ''
dataIndex.notice.forEach((item)=>{
    tmp1 += `<p>${item}</p>`
})
$(".scroll").innerHTML = tmp1

//渲染第三行
var tmp2 = ''
dataIndex.navs.forEach((item)=>{
    tmp2 +=`<li>
                <a href="./list.html?class=${item.class}">
                    <div class="pic">
                        <img src="${item.icon}"alt="">
                    </div>
                    <div class="my_name">${item.title}</div>
                </a>
            </li>`
})
$(".inner-list").innerHTML = tmp2

//渲染轮播图
var tmp3 = ''
var tmp4 = ''
dataIndex.banner.forEach((item,index)=>{
    tmp3 += `<li style="background-image: url(.${item.imgurl});"></li>`
    tmp4 += `<div>${index+1}</div>`
})
$(".lunbo ul").innerHTML = tmp3
$(".lunbo .pages").innerHTML = tmp4

//渲染新商品
var tmp5 = ""
dataIndex.Mavic.new.forEach((item)=>{
    tmp5 += `<li>
                <a href="./detail.html?id=${item.id}">
                    <img class="pic1" src="${item.imgbg1}" alt="">
                    <img class="pic2" src="${item.imgbg2}" alt="">
                    <img class="pic3" src="${item.imghover}" alt="">
                    <div class="ban">
                        <h2>${item.title}</h2>
                        <div class="item-cnt">${item.cnt}</div>
                        <p>${item.description}</p>
                        <span>${item.price}</span>
                    </div>
                </a>
            </li>`
})
$(".main-header ul").innerHTML = tmp5

//渲染section-head
var tmp6 = `<a class="left" href="./detail.html?id=${dataIndex.Mavic.main.id}">
                <div class="good">
                    <div class="pic"
                        style="background-image: url(${dataIndex.Mavic.main.imgurl});">
                    </div>
                </div>
                <div class="info">
                    <h2>${dataIndex.Mavic.main.title}</h2>
                    <P>${dataIndex.Mavic.main.description}</P>
                    <h5>￥${dataIndex.Mavic.main.price}</h5>
                </div>
            </a>
            <div class="right">
            <video height="400" loop="" autoplay="" muted=""
                src="${dataIndex.Mavic.main.video}"
                poster="${dataIndex.Mavic.main.poster}"></video>
            </div>`
$(".section-head").innerHTML = tmp6

//渲染section-list
var tmp7 = ""
dataIndex.Mavic.list.forEach((item)=>{
    tmp7 +=`<li>
                <a href="./detail.html?id=${item.id}">
                    <div class="img">
                        <img src="${item.imgbg}" alt="" width="256">
                    </div>
                    <div class="img-hover">
                        <img src="${item.imghover}" alt="">
                        <p>${item.description}</p>
                    </div>
                    <h3>${item.title}</h3>
                    <h5>${item.price}</h5>
                </a>
            </li>`
})
$(".section-list").innerHTML = tmp7

//监听滚动事件，判断totop是否隐藏
window.onscroll = function(){
    if(document.documentElement.scrollTop >= 1000){
        $(".totop").style.display = "block"
    }else{
        $(".totop").style.display = "none"
    }
}

//给totop添加点击事件
$(".totop").onclick = function(){
    var timeId = setInterval(()=>{
        document.documentElement.scrollTop -= 100;
        if(document.documentElement.scrollTop <= 0){
            clearInterval(timeId)
        }
    },20)
}

//head轮播播报

var li = $('.scroll')
var ps = li.children
li.appendChild(ps[0].cloneNode(true))

//进入页面自动播放
autoPlay()

var timer1//一定要设置为全局变量

function autoPlay(){
    clearInterval(timer1)
    //每隔三秒换一条通告
    timer1 = setInterval(function(){
        moveTop()
    },3000)
}

var current = 0
var mytime
function moveTop(){
    var p_height = ps[0].clientHeight
    if(current === - (ps.length-1) * p_height){
        current = 0
        $(".scroll").style.top = 0 + "px"
    }
    clearInterval(mytime)
    mytime = setInterval(()=>{
        current -= 2
        $(".scroll").style.top = current + "px"
        if(Math.abs(current) % p_height === 0){
            clearInterval(mytime)
        }
    },15)
}

//轮播图
var lis = $(".lunbo ul li")
var prev = $(".prev")
var next = $(".next")
var pages = $(".pages div")

var index = 0
var timer2
//初始化
lis[0].className = "show"
pages[0].className = "active"
lis[0].style.opacity = 1
//进入页面开始自动播放
autoPlay1()
//每隔三秒播放下一张图片
function autoPlay1(){
    clearInterval(timer2)
    timer2 = setInterval(function(){
        //播放下一张
        moveNext()
    },3000)
}
//切换下一张函数
function moveNext(){
    lis[index].className = ""
    // lis[index].style.opacity = 0.1
    animate(lis[index],{opacity:0.1})
    pages[index].className = ""

    index++

    if(index >=lis.length){
        index = 0
    }

    lis[index].className = "show"
    pages[index].className = "active"
    // lis[index].style.opacity = 1
    animate(lis[index],{opacity:1})
}

//切换上一张函数
function movePrev(){
    lis[index].className = ""
    // lis[index].style.opacity = 0.1
    animate(lis[index],{opacity:0.1})
    pages[index].className = ""

    index--

    if(index < 0){
        index = lis.length - 1 
    }

    lis[index].className = "show"
    pages[index].className = "active"
    // lis[index].style.opacity = 1
    animate(lis[index],{opacity:1})
}

//点击下一张按钮
next.onclick = function(){
    //首先先清除自动播放效果
    clearInterval(timer2)

    //调用切换下一张函数
    moveNext()

    //执行完上边的函数，继续自动播放
    autoPlay1()
}

//点击上一张按钮
prev.onclick = function(){
    //首先先清除自动播放效果
    clearInterval(timer2)

    //调用切换上一张函数
    movePrev()

    //执行完上边的函数，继续自动播放
    autoPlay1()
}



//点击分页器
for(var i =  0 ; i < pages.length ; i++){
    pages[i].index = i
    pages[i].onclick = function(){
        //清除自动播放
        clearInterval(timer2)

        lis[index].className = ""
        // lis[index].style.opacity = 0.1
        animate(lis[index],{opacity:0.1})
        pages[index].className = ""

        index = this.index

        lis[index].className = "show"
        pages[index].className = "active"
        // lis[index].style.opacity = 1
        animate(lis[index],{opacity:1})

        //开始自动播放
        autoPlay1()
    }
}

//离开页面时停止所有的计时器，回到页面开启计时器
window.onblur = function(){
    clearInterval(timer1)
    clearInterval(timer2)
}
window.onfocus = function(){
    autoPlay()
    autoPlay1()
}

